<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="Author" contect="http://www.webqin.net">
    <title>尚好房</title>
    <link rel="shortcut icon" href="./static/images/favicon.ico"/>
    <link type="text/css" href="./static/css/css.css" rel="stylesheet"/>
    <script type="text/javascript" src="./static/js/jquery.js"></script>
    <script type="text/javascript" src="./static/js/js.js"></script>
    <script type="text/javascript" src="./static/js/axios.min.js"></script>
    <script type="text/javascript" src="./static/js/vue.js"></script>
    <script type="text/javascript">
        $(function () {
            //导航定位
            $(".nav li:eq(1)").addClass("navCur");
        })
    </script>
</head>

<body>
<div id="list">
    <div class="header">
        <div class="width1190">
            <div class="fl">您好，欢迎来到尚好房！</div>
            <div class="fr" v-if="userInfo.nickName == ''">
                <a href="login.html">登录</a> |
                <a href="register.html">注册</a> |
                <a href="javascript:;">加入收藏</a> |
                <a href="javascript:;">设为首页</a>
            </div>
            <div class="fr" v-else>
                <a href="javascript:;">欢迎 {{ userInfo.nickName }}</a> |
                <a href="javascript:;" @click="logout">退出</a> |
                <a href="follow.html">我的关注</a> |
                <a href="javascript:;">加入收藏</a> |
                <a href="javascript:;">设为首页</a>
            </div>
            <div class="clears"></div>
        </div><!--width1190/-->
    </div>
    <div class="list-nav">
        <div class="width1190">
            <div class="list"><h3>房源分类</h3></div><!--list/-->
            <ul class="nav">
                <li><a href="index.html">首页</a></li>
                <li><a href="about.html">关于我们</a></li>
                <li><a href="contact.html">联系我们</a></li>
                <div class="clears"></div>
            </ul><!--nav/-->
            <div class="clears"></div>
        </div><!--width1190/-->
    </div><!--list-nav/-->
    <div class="banner" style="background:url(./static/images/ban.jpg) center center no-repeat;"></div>

        <div class="content">
            <div class="width1190">
                <form action="#" method="get" class="pro-search">
                    <table>
                        <tr>
                            <th>房源区域：</th>
                            <td>
                                <div style="line-height: 30px;">
                                    <a href="javascript:;" @click="searchArea('')" :class="houseQueryVo.areaId=='' ? 'pro-cur' : ''">不限</a>

                                    <a href="javascript:;" v-for="item in areaList" v-text="item.name" :key="item.id"
                                    :class="houseQueryVo.areaId==item.id ? 'pro-cur' : ''" @click="searchArea(item.id)"
                                    >智慧园</a>
                                </div>
                                <!--新增区域-->
                                <div style="font-size: 12px;border-top:#ccc 1px dotted;">
                                    <a href="javascript:;" v-for="item in plateList" v-text="item.name" :key="item.id"
                                    :class="houseQueryVo.plateId==item.id ? 'pro-cur' : ''" @click="searchPlate(item.id)">锦江</a>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th>户型：</th>
                            <td>
                                <a href="javascript:;" :class="houseQueryVo.houseTypeId=='' ? 'pro-cur' : ''" @click="searchHouseType('')">不限</a>
                                <a href="javascript:;" v-for="item in houseTypeList" v-text="item.name" :key="item.id"
                                    :class="houseQueryVo.houseTypeId==item.id ? 'pro-cur' : ''" @click="searchHouseType(item.id)">一室一厅</a>
                            </td>
                        </tr>
                        <tr>
                            <th>楼层：</th>
                            <td>
                                <a href="javascript:;" :class="houseQueryVo.floorId=='' ? 'pro-cur' : ''" @click="searchFloor('')">不限</a>
                                <a href="javascript:;" v-for="item in floorList" v-text="item.name" :key="item.id"
                                   :class="houseQueryVo.floorId==item.id ? 'pro-cur' : ''" @click="searchFloor(item.id)">不限</a>
                            </td>
                        </tr>
                        <tr>
                            <th>建筑结构</th>
                            <td>
                                <a href="javascript:;" :class="houseQueryVo.buildStructureId=='' ? 'pro-cur' : ''" @click="searchBuildStructure('')">不限</a>
                                <a href="javascript:;" v-for="item in buildStructureList" v-text="item.name" :key="item.id"
                                   :class="houseQueryVo.buildStructureId==item.id ? 'pro-cur' : ''" @click="searchBuildStructure(item.id)">不限</a>
                            </td>
                        </tr>
                        <tr>
                            <th>朝向</th>
                            <td>
                                <a href="javascript:;" :class="houseQueryVo.directionId=='' ? 'pro-cur' : ''" @click="searchDirection('')">不限</a>
                                <a href="javascript:;" v-for="item in directionList" v-text="item.name" :key="item.id"
                                   :class="houseQueryVo.directionId==item.id ? 'pro-cur' : ''" @click="searchDirection(item.id)">不限</a>
                            </td>
                        </tr>
                        <tr>
                            <th>装修情况</th>
                            <td>
                                <a href="javascript:;" :class="houseQueryVo.decorationId=='' ? 'pro-cur' : ''" @click="searchDecoration('')">不限</a>
                                <a href="javascript:;" v-for="item in decorationList" v-text="item.name" :key="item.id"
                                   :class="houseQueryVo.decorationId==item.id ? 'pro-cur' : ''" @click="searchDecoration(item.id)">不限</a>
                            </td>
                        </tr>
                        <tr>
                            <th>房屋用途</th>
                            <td>
                                <a href="javascript:;" :class="houseQueryVo.houseUseId=='' ? 'pro-cur' : ''" @click="searchHouseUse('')">不限</a>
                                <a href="javascript:;" v-for="item in houseUseList" v-text="item.name" :key="item.id"
                                   :class="houseQueryVo.houseUseId==item.id ? 'pro-cur' : ''" @click="searchHouseUse(item.id)">不限</a>
                            </td>
                        </tr>
                    </table>
                    <div class="paixu">
                        <strong>排序：</strong>
                        <a href="javascript:;" @click="sortDefault()" :class="houseQueryVo.defaultSort=='1' ? 'pai-cur' : ''">默认</a>
                        <a href="javascript:;" @click="sortPrice()" :class="houseQueryVo.priceSort=='1' ? 'pai-cur' : ''">价格 &or;</a>
                        <a href="javascript:;" @click="sortTime()" :class="houseQueryVo.timeSort=='1' ? 'pai-cur' : ''">最新 &or;</a>
                    </div>
                </form><!--pro-search/-->
            </div><!--width1190/-->
            <div class="width1190">
                <div class="pro-left">
                    <dl v-for="house in page.list" :key="house.id">
                        <dt><a :href="'info.html?id='+house.id"><img :src="house.defaultImageUrl" width="286" height="188"/></a></dt>
                        <dd>
                            <h3><a :href="'info.html?id='+house.id">{{house.name}}</a></h3>
                            <div class="pro-wei">
                                <img :src="house.defaultImageUrl" width="12" height="16"/> <strong class="red">{{house.communityName}}</strong>
                            </div>
                            <div class="pro-fang">{{house.buildArea}}平 {{ house.houseTypeName}} {{house.floorName}} {{house.directionName}}</div>
                            <div class="pra-fa">发布时间：{{house.createTimeString}}</div>
                        </dd>
                        <div class="price">¥ <strong>{{house.totalPrice}}</strong><span class="font12">万元</span></div>
                        <div class="clears"></div>
                    </dl>

                </div><!--pro-left/-->
                <div class="pro-right">
                    <h2 class="right-title">新上房源</h2>
                    <div class="right-pro">
                        <dl>
                            <dt><a href="info.html"><img src="./static/images/fang8.jpg"/></a></dt>
                            <dd>
                                <h3><a href="info.html">中装一室一厅，楼层好，采光足，稀缺房源</a></h3>
                                <div class="pro-fang">一室一厅 38平 南</div>
                                <div class="right-price">90万元</div>
                            </dd>
                        </dl>
                        <dl>
                            <dt><a href="info.html"><img src="./static/images/fang7.jpg"/></a></dt>
                            <dd>
                                <h3><a href="info.html">中装两室，楼层好，采光足，稀缺房源</a></h3>
                                <div class="pro-fang">两室一厅 78平 南</div>
                                <div class="right-price">130万元</div>
                            </dd>
                        </dl>
                        <dl>
                            <dt><a href="info.html"><img src="./static/images/fang6.jpg"/></a></dt>
                            <dd>
                                <h3><a href="info.html">中装三室，楼层好，采光足，稀缺房源</a></h3>
                                <div class="pro-fang">三室一厅 98平 南</div>
                                <div class="right-price">190万元</div>
                            </dd>
                        </dl>
                    </div><!--right-pro/-->
                </div><!--pro-right/-->
                <div class="clears"></div>
                <ul class="pages">
                    <!--<li>
                        <a href="#">首页</a>
                    </li>-->
                    <li>
                        <a href="javascript:" @click="fetchData(page.prePage)" v-if="page.hasPreviousPage">上一页</a>
                    </li>
                    <li v-for="item in page.navigatepageNums" :class="item==page.pageNum ? 'page_active' : ''">
                        <a href="javascript:" @click="fetchData(item)">{{item}}</a>
                    </li>
                    <li>
                        <a href="javascript:" @click="fetchData(page.nextPage)" v-if="page.hasNextPage">下一页</a>
                    </li>
                    <!--<li>
                        <a href="#">尾页</a>
                    </li>-->
                </ul>
            </div><!--width1190/-->
        </div><!--content/-->

    <div class="footer">
        <div class="width1190">
            <div class="fl"><a href="index.html"><strong>尚好房</strong></a><a href="about.html">关于我们</a><a
                    href="contact.html">联系我们</a><a href="follow.html">个人中心</a></div>
            <div class="fr">
                <dl>
                    <dt><img src="./static/images/erweima.png" width="76" height="76"/></dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布</dd>
                </dl>
                <dl>
                    <dt><img src="./static/images/erweima.png" width="76" height="76"/></dt>
                    <dd>微信扫一扫<br/>房价点评，精彩发布</dd>
                </dl>
                <div class="clears"></div>
            </div>
            <div class="clears"></div>
        </div><!--width1190/-->
    </div><!--footer/-->
    <div class="copy">Copyright@ 2020 尚好房 版权所有 沪ICP备1234567号-0&nbsp;&nbsp;&nbsp;&nbsp;技术支持：XXX</div>
    <div class="bg100"></div>
</div>
<script>
    new Vue({
        el: "#list",
        data:{
            //获取所有的搜索数据

            //房源区域
            areaList:[],
            //板块
            plateList:[],
            //户型
            houseTypeList:[],
            //楼层
            floorList:[],
            //建筑结构
            buildStructureList:[],
            //朝向
            directionList:[],
            //装修情况
            decorationList:[],
            //房屋用途
            houseUseList:[],
            //房屋查询条件HouseQueryVo
            houseQueryVo:{
                areaId: '',
                plateId: '',
                houseTypeId: '',
                floorId: '',
                buildStructureId:'',
                directionId: '',
                decorationId:'',
                houseUseId:'',

                //排序方式
                defaultSort: 1,
                priceSort: null,
                timeSort: null,
            },

            page: {
                list: [],
                pageNum: 1,
                pageSize: 2, //方便测试分页p
                pages: 1,
                navigatepageNums: [1,2,3,4],
                prePage: 0,
                nextPage: 0,
                hasPreviousPage: false,
                hasNextPage: false
            },

            //用户登录信息
            userInfo:{
                nickName: ''
            }
        },

        methods:{
            //获取搜索条件
            fetchDictData(){
                //房源区域
                axios.get('/dict/findListByDictCode/beijing').then(response=>{
                    this.areaList=response.data.data
                })
                //户型
                axios.get('/dict/findListByDictCode/houseType').then(response=>{
                    this.houseTypeList=response.data.data
                })
                //楼层
                axios.get('/dict/findListByDictCode/floor').then(response=>{
                    this.floorList=response.data.data
                })
                //建筑结构
                axios.get('/dict/findListByDictCode/buildStructure').then(response=>{
                    this.buildStructureList=response.data.data
                })
                //朝向
                axios.get('/dict/findListByDictCode/direction').then(response=>{
                    this.directionList=response.data.data
                })
                //装修情况
                axios.get('/dict/findListByDictCode/decoration').then(response=>{
                    this.decorationList=response.data.data
                })
                //房屋用途
                axios.get('/dict/findListByDictCode/houseUse').then(response=>{
                    this.houseUseList=response.data.data
                })
            },

            //查找房源信息
            fetchData(pageNum){
                if (pageNum<1) pageNum=1
                this.page.pageNum=pageNum
                axios.post('/house/list/'+pageNum+'/'+this.page.pageSize, this.houseQueryVo).then(response=>{
                    this.page=response.data.data
                })
            },
            //条件搜索
            //区域
            searchArea(id){
                this.houseQueryVo.areaId=id
                this.houseQueryVo.plateId=''
                this.fetchData(1)
                if (id===''){
                    this.plateList=[]
                    return
                }
                axios.get('/dict/findListByParentId/'+id).then(response=>{
                    this.plateList=response.data.data
                })
            },
            //板块
            searchPlate(id){
                this.houseQueryVo.plateId=id
                this.fetchData(1)
            },
            searchHouseType(id){
                this.houseQueryVo.houseTypeId=id
                this.fetchData(1)
            },
             searchFloor(id){
                this.houseQueryVo.floorId=id
                this.fetchData(1)
            },
             searchBuildStructure(id){
                this.houseQueryVo.buildStructureId=id
                this.fetchData(1)
            },
             searchDirection(id){
                this.houseQueryVo.directionId=id
                this.fetchData(1)
            },
            searchDecoration(id){
                this.houseQueryVo.decorationId=id
                this.fetchData(1)
            },
             searchHouseUse(id){
                this.houseQueryVo.houseUseId=id
                this.fetchData(1)
            },
            //排序
            sortDefault(){
                this.houseQueryVo.defaultSort=1
                this.houseQueryVo.priceSort=null
                this.houseQueryVo.timeSort=null
                this.fetchData(1)
            },
            sortPrice(){
                this.houseQueryVo.defaultSort=null
                this.houseQueryVo.priceSort=1
                this.houseQueryVo.timeSort=null
                this.fetchData(1)
            },
            sortTime(){
                this.houseQueryVo.defaultSort=null
                this.houseQueryVo.priceSort=null
                this.houseQueryVo.timeSort=1
                this.fetchData(1)
            },

            login(){
                let userInfoString = window.localStorage.getItem('userInfo')
                if (userInfoString!==null && userInfoString!==''){
                    this.userInfo=JSON.parse(userInfoString)
                }
            },
            logout(){
                axios.get('/userInfo/logout').then(response=>{
                    window.localStorage.setItem("userInfo",'')
                    window.location.href='index.html'
                })
            }
        },
        created(){
            //页面加载发起ajax请求获取所有的搜索条件信息
            this.fetchDictData()
            //查询房屋信息
            this.fetchData(1)
            this.login()
        }
    })
</script>
</body>
</html>
